<template>
	<view class="content">


		<z-paging ref="paging" bgColor="#1F2630" @query="getList" v-model="list">
			<!--  -->
			<view class="" slot="top">
				<!-- #ifdef APP -->
				<NavBarCommon></NavBarCommon>
				<!-- #endif -->
				<view class="claimBox">
					<image src="@/static/home/right.png" alt="" class="claim1" @click="goBack" />
					<!-- @click="goTest" -->
					<view class="claim2">{{$t('purchaserecord')}}</view>
				</view>
				<!-- <u-gap></u-gap> -->
			</view>
			<!--  -->
			<view class="" v-for="item, index in list" :key="index" @click="goDetail(item)">
				<u-gap></u-gap>
				<view class="flex  align-items-center"
					style="width: 690rpx;height: 207rpx;background: #29313C;border-radius: 20rpx;margin: 0 auto">
					<view class="" style="margin-left: 30rpx;margin-right: 33rpx;">
						<image src="@/static/invitedlist/logo.png" style="width:128rpx;height: 102rpx;" />
					</view>
					<view class="" style="width: 234rpx;margin-right: 222rpx;">
						<view class="text">{{ formatPublicKey(item[0].address) }}</view>
						<view class="text" style="margin-top: 24rpx;">{{$t("count")}} : {{ item.length }}</view>
						<view class="text" style="margin-top: 25rpx;">{{ timeFomate(item[0].created_at) }}</view>
					</view>
					<view class="" style="margin-right: 20rpx;">
						<image src="@/static/invitedlist/right.png" style="width:22rpx;height: 38rpx;" />
					</view>
				</view>
			</view>
			<!--  -->

			<view class="" slot="bottom">

			</view>
		</z-paging>
	</view>
</template>

<script>
import {
	inviteCodehistory
} from '@/api/index.js'
export default {
	data() {
		return {
			model: {
				address: "",
				role: "",
				amount: 0,
				price: 0
			},
			list: []
		};
	},
	computed: {
		totalPrice() {
			return (this.model.amount * this.model.price)
		}
	},
	methods: {
		
		goTest(){
			uni.navigateTo({
				url:'/pages/invitedDetail/invitedDetail'
			})
		},
		
		timeFomate(dateString) {
			const date = new Date(dateString);
			// 格式化为 2025 03-03 10:20
			const year = date.getFullYear();
			const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份是从 0 开始的，所以需要加 1
			const day = String(date.getDate()).padStart(2, '0');
			const hours = String(date.getHours()).padStart(2, '0');
			const minutes = String(date.getMinutes()).padStart(2, '0');

			return `${year} ${month}-${day} ${hours}:${minutes}`;
		},
		// 方法用于格式化 publicKey 的显示
		formatPublicKey(key) {
			if (!key) return "";
			const start = key.slice(0, 10);
			const end = key.slice(-10);
			return `${start}...${end}`;
		},
		goDetail(e) {
			console.log('e', e);
			let jsonData = JSON.stringify(e)
			/* 详情 */
			uni.navigateTo({
				url: `/pages/invitedDetail/invitedDetail?data=${jsonData}`
			})
		},
		// 数据
		async getList() {
			let data ={
				address:uni.getStorageSync('walletAddress')
			}
			let res = await inviteCodehistory(data)
			console.log(res, "inviteCodehistoryApi");
			if (res.code == 200) {
				console.log(res.data, 'res.data');
				const groupedData = res.data.reduce((result, currentItem) => {
					// 检查该 hx 是否已经存在于结果对象中
					if (!result[currentItem.hx]) {
						result[currentItem.hx] = [];
					}
					// 将当前 item 添加到对应 hx 的数组中
					result[currentItem.hx].push(currentItem);
					return result;
				}, {});
				console.log(groupedData, 'groupedData');

				const groupedArrayData = Object.values(groupedData);
				console.log(groupedArrayData, 'groupedArrayDatas');

				this.$refs.paging.complete(groupedArrayData);
			}
		},
		goBack() {
			uni.navigateBack()
		},
	},
	onLoad() { },
	onShow() {
		// await this.inviteCodehistoryApi()
	}
};
</script>

<style scoped lang="scss">
.text {
	font-family: Source Han Sans CN;
	font-weight: 300;
	font-size: 30rpx;
	color: #FFFFFF;
	line-height: 30rpx;
}

.headerBox {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.leftBox {
	display: flex;
	align-items: center;
	margin-left: 16rpx;
}

.oneImage {
	width: 129rpx;
	height: 129rpx;
}

.hello {
	font-weight: 800;
	font-size: 36rpx;
	color: #ffffff;
	line-height: 64rpx;
}

.recharge-tag {
	display: flex;
	justify-content: center;
	margin: 0 30rpx;

	.recharge-tag-left {
		text {
			font-family: Source Han Sans CN;
			font-weight: 300;
			font-size: 24rpx;
			color: #FFFFFF;
			line-height: 64rpx;
		}
	}

	.recharge-tag-right {
		text {
			font-family: Source Han Sans CN;
			font-weight: 300;
			font-size: 24rpx;
			color: #FFFFFF;
			line-height: 64rpx;
		}
	}
}

.mev-follow-robot-search-wrap {
	margin: 0 30rpx;
	height: 108rpx;
	background: #29313C;
	border-radius: 30rpx;
	border: 2rpx solid #6C7680;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 30rpx;

	.mev-follow-robot-search-wrap-icon {
		margin: 30rpx 20rpx 30rpx 30rpx;
		width: 48rpx;
		height: 48rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.mev-follow-robot-search-wrap-input {
		display: flex;
		align-items: center;

		input {
			color: white;
		}
	}

	.mev-follow-robot-search-wrap-select {
		display: flex;
		align-items: center;

		.mev-follow-robot-search-wrap-select-label {
			font-family: Source Han Sans CN;
			font-weight: bold;
			font-size: 24rpx;
			color: #fff;
			// color: #45E5AF;
			line-height: 64rpx;
		}

		.mev-follow-robot-search-wrap-select-icon {
			width: 20rpx;
			height: 12rpx;
			margin-left: 16rpx;
			margin-right: 36rpx;
		}
	}
}

.recharge-header {
	display: flex;
	// align-items: center;
	// justify-content: space-between;
	margin: 0 30rpx;
	justify-content: space-between;



	.recharge-header-back-icon {
		margin-right: 26rpx;

		image {
			width: 22rpx;
			height: 38rpx;
		}
	}

	.recharge-header-title {
		text {
			font-family: Source Han Sans CN;
			font-weight: bold;
			font-size: 36rpx;
			color: #FFFFFF;
			line-height: 36rpx;

		}
	}

	.recharge-header-subtitle {
		// vertical-align: bottom;
		display: flex;
		align-items: end;

		/* 使元素垂直居中 */
		text {
			font-family: Source Han Sans CN;
			font-weight: 300;
			font-size: 24rpx;
			color: #45E5AF;
			// line-height: 64rpx;
		}
	}

}




/*  */
.wallet-avatar-gap {
	border-radius: 40rpx;
	background-color: #4a90e2;
	width: 80rpx;
	height: 80rpx;
	margin-right: 31rpx;
}

.content {
	width: 100%;
	min-height: 100vh;
	background-color: #1f2630;
}

.claimBox {
		padding-top: 50rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;

	.claim1 {
		position: absolute;
		left: 2%;
		width: 22rpx;
		height: 38rpx;
		// margin-left: 28rpx;
	}

	.claim2 {
		font-weight: 500;
		font-size: 36rpx;
		color: #ffffff;
		// margin-left: 275rpx;
	}
}

.addressOne {
	display: flex;
	align-items: center;
	margin-top: 59rpx;
	margin-left: 30rpx;

	.tp {
		width: 100rpx;
		height: 100rpx;
	}

	.address {
		font-weight: 300;
		font-size: 36rpx;
		color: #ffffff;
		margin-left: 21rpx;
	}

	.down {
		width: 25rpx;
		height: 14rpx;
		margin-left: 20rpx;
	}
}

.picBox {
	width: 690rpx;
	height: 420rpx;

	// background-image: url("/static/home/nine.png");
	background: url('/static/home/nine.png') no-repeat;

	background-size: 100%;

	margin-left: 30rpx;
	margin-right: 30rpx;
	margin-top: 30rpx;

	.picOne {
		display: flex;
		align-items: center;
		padding-top: 30rpx;

		.pic1 {
			width: 44rpx;
			height: 48rpx;
			margin-left: 22rpx;
		}

		.num1 {
			font-size: 30rpx;
			color: #ffffff;
			margin-left: 11rpx;
		}

		.num2 {
			font-size: 48rpx;
			color: #ffffff;
			margin-left: 45rpx;
		}

		.pic2 {
			width: 35rpx;
			height: 23rpx;
			margin-left: 20rpx;
		}
	}

	.drawDownBox {
		display: flex;
		align-items: center;
		justify-content: space-around;
		margin-top: 63rpx;

		.drawOne {
			// margin-left: 46rpx;
			text-align: center;

			.one {
				font-size: 36rpx;
				color: #ffffff;
			}

			.one1 {
				font-size: 24rpx;
				color: #8e8e8f;
			}
		}

		.drawTwo {
			// margin-left: 125rpx;
			text-align: center;

			.two {
				font-size: 36rpx;
				color: #ffffff;
			}

			.two2 {
				font-size: 24rpx;
				color: #8e8e8f;
			}
		}

		.drawThree {
			// margin-left: 134rpx;
			text-align: center;

			.three {
				font-size: 36rpx;
				color: #ffffff;
			}

			.three3 {
				font-size: 24rpx;
				color: #8e8e8f;
			}
		}
	}
}

.progress-container {
	width: 600rpx;
	display: flex;
	margin: 0 auto;
	align-items: center;
	// background-color: #333;
	border-radius: 10px;
	// overflow: hidden;
	// margin-left: 45rpx;
	// margin-top: 60rpx;
	position: relative;
	flex-direction: column;
}

.progress-bar {
	width: 600rpx;
	height: 20rpx;
	// background-color: #ffcc00;
	border-radius: 12px;

	background: linear-gradient(to right, #ffcc00 var(--difference-percentage), #1F2631 0%);
	/* 黄色 */
	transition: width 0.5s ease-in-out;
}

.percentage {
	// position: absolute;
	// top: 41%;


	// left: 40%;
	// right: 10px;

	font-size: 72rpx;
	color: #fcd434;
}

.submitBox {
	width: 690rpx;
	height: 88rpx;
	background: #29313C;
	border-radius: 44rpx;
	margin-top: 60rpx;
	margin-left: 30rpx;


	.submit {
		font-weight: bold;
		font-size: 36rpx;
		color: #0d081a;
		line-height: 80rpx;
		text-align: center;
	}
}

.active {
	background: #fcd434 !important;
}
</style>